<template>
    <div class="replyer">
        <p><el-button type="text" v-if="index == 0">共 {{total}} 条回复</el-button></p>
        <div class="flex">
            <!-- 左 -->
            <div class="left">
                <!-- 头像 -->
                <div class="profile flex flex-y flex-between">
                    <div class="flex flex-y">
                        <div class="pic">
                            <img :src="formData.headImg?formData.headImg:common.defaultImg">
                        </div>
                        <p class="name">{{formData.accountName}}</p>
                    </div>
                    <p class="none right10">{{filter_date(formData.reviewDate)}}</p>
                </div>
                <!-- 主内容 -->
                <div class="content">
                    <cmsConvert :data="formData.content"></cmsConvert>
                </div>
                <!-- 按钮组 -->
                <div class="btns flex flex-y">
                    <el-button
                        type="primary"
                        plain
                        size="small"
                        @click="handle(formData)">下线</el-button>
                    <el-button
                        v-if="formData.recommendFlag"
                        plain
                        size="small"
                        @click="recomment('off',formData)">取消推荐</el-button>
                    <el-button
                        v-else
                        type="primary"
                        plain
                        size="small"
                        @click="recomment('up',formData)">推荐</el-button>
                    <el-button
                        type="primary"
                        plain
                        size="small"
                        @click="getZan(formData)">增加点赞数</el-button>
                </div>
            </div>
            <!-- 右 -->
            <div class="right">
                <p class="none bottom10">图片</p>
                <div class="imgs flex flex-wrap">
                    <p class="none" v-if="formData.pictures.length == 0">暂无数据</p>
                    <div
                        v-else
                        class="pic"
                        @click="url = child.imgUrl,ifShow = !ifShow"
                        v-for="(child,key) in formData.pictures"
                        :key="key">
                        <img :src="child.imgUrl">
                    </div>
                </div>
            </div>
        </div>
        <!-- 图片预览 -->
        <cmsPreview :ifShow="ifShow" :url="url"></cmsPreview>
        <!-- 下线原因 -->
        <off
            :ifShow="ifOff"
            :formData="currentData"
            @httpSuccess="offSuccess"
            type="4">
            <!-- 1=动态,2=提问,3=文章,4=回答,5=评论 -->
        </off>
        <!-- 推荐至 -->
        <recommend
            :ifShow="ifRecommend"
            :formData="currentData"
            @httpSuccess="recommendSuccess"
            type="4">
            <!-- 1=动态,2=提问,3=文章,4=回答,5=评论 -->
        </recommend>
    </div>
</template>

<script>
import {formatDate} from '@/utils/formatDate.js'
import off from '@/components/content/off'
import recommend from '@/components/content/recommend'
export default {
    props:["formData","index","total"],
    components:{
        off,
        recommend
    },
    data () {
        return {
            url:"",
            ifShow:false,

            //弹窗
            ifOff:false,
            currentData:"",
            ifRecommend:false,
        }
    },
    methods:{
        //时间戳转时间
        filter_date:function(time){
            let date = new Date(time*1000);
            return formatDate(date,'yyyy-MM-dd hh:mm:ss');
        },
        //下线、上线
        handle:function(obj){
            this.currentData = obj;
            this.ifOff = !this.ifOff;
        },
        //下线成功的回调
        offSuccess:function(){
            console.log('下线成功的回调');
            this.$emit('offSuccess',this.formData);
        },
        //推荐
        recomment:function(type,obj){
            this.currentData = obj;
            //0:已推荐:1:未推荐
            //取消推荐
            if(type == 'off'){
                HTTP('robot_recommend', {
                    contentType:4,
                    uid:obj.uid,
                    status:'1'
                })
                .then(res=>{
                    if(res.code == 200){
                        this.common.msg('取消推荐成功');
                        this.$emit('recommendSuccess',this.formData,0);
                    }
                    else{
                        this.common.msg(res.msg,'error');
                    }
                })
            }
            //推荐
            else{
                this.currentData = obj;
                this.ifRecommend = !this.ifRecommend;
            }
        },
        //推荐成功的回调
        recommendSuccess:function(){
            this.$emit('recommendSuccess',this.formData,1);
        },
        //获取点赞数
        getZan:function(obj){
            HTTP('robot_getZan')
            .then(res=>{
                if(res.code == 200){
                    this.$confirm(`根据参数配置，本次将增加点赞数${res.data.approvals}，增加浏览量${res.data.browses}`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        this.addZan(obj);
                    })
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
        //增加点赞数
        addZan:function(obj){
            HTTP('robot_addZan', {
                uid:obj.uid,
                contentType:4
            })
            .then(res=>{
                if(res.code == 200){
                    this.common.msg('操作成功');
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>
    .replyer{
        border-top: 1px solid #DDDDDD;
        padding: 24px 0 30px 60px;
        .left{
            width: calc(100% - 370px);
            margin-right: 20px;
            position: relative;
            .profile{
                padding: 10px 0;
                .pic{
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    overflow: hidden;
                    img{
                        width: 100%;
                        min-height: 25px;
                    }
                }
                .name{
                    color: #999;
                    margin-left: 12px;
                    font-size: 14px;
                }
            }
            .content{
                width: 100%;
                min-height: 40px;
                padding: 10px 0 40px 0;
                word-break:break-all;
            }
        }
        .right{
            width: 350px;
            .imgs{
                .pic{
                    width: 100px;
                    height: 100px;
                    padding: 4px;
                    overflow: hidden;
                    cursor: pointer;
                    img{
                        width: 100%;
                        min-height: 100px;
                    }
                }
            }
        }
    }
</style>
